<template>
  <el-dialog
    :title="!dataForm.id ? '新增' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="150px" size="small">
      <el-form-item label="计量器编码" prop="meterCode">
        <el-input v-model="dataForm.meterCode" placeholder="计量器编码" maxlength="50"></el-input>
      </el-form-item>
      <el-form-item label="计量器名称" prop="meterCode">
        <el-input v-model="dataForm.meterName" placeholder="计量器名称" maxlength="50"></el-input>
      </el-form-item>
    <el-form-item label="计量器物理地址" prop="meterAddr">
      <el-input v-model="dataForm.meterAddr" placeholder="计量器物理地址" maxlength="50"></el-input>
    </el-form-item>

    <el-form-item label="采集器" prop="equiCode">
      <el-select v-model="dataForm.equiCode" filterable>
        <el-option v-for="item in collectDataList" :key="item.equiCode" :label="item.equiName+'['+item.equiCode+']'" :value="item.equiCode" />
      </el-select>
    </el-form-item>
    <el-form-item label="计量器类型" prop="meterType">
      <el-select v-model="dataForm.meterType">
        <el-option v-for="item in meterTypeList" :key="item.paramValue" :label="item.paramValue" :value="item.paramKey" v-show="item.paramKey !== '9'" />
      </el-select>
    </el-form-item>
<!--    <el-form-item label="计量器状态" prop="meterStatus">
      <el-radio v-model="dataForm.meterStatus" label="1">正常</el-radio>
      <el-radio v-model="dataForm.meterStatus" label="0">异常</el-radio>
    </el-form-item>-->
<!--    <el-form-item label="计量器上次上报数据时间" prop="meterLastupdate">
      <el-input v-model="dataForm.meterLastupdate" placeholder="计量器上次上报数据时间"></el-input>
    </el-form-item>-->
      <el-form-item label="计量器协议类型" >
        <el-select v-model="dataForm.meterModelPotocol" @change="changeProtocal()">
          <el-option v-for="item in potocolList" :key="item" :label="item" :value="item" />
        </el-select>
      </el-form-item>
    <el-form-item label="计量器型号"  prop="meterModel" >
      <el-select v-model="dataForm.meterModel">
        <el-option v-for="item in meterModelList" :key="item.meterModel" :label="item.meterModel" :value="item.meterModel" />
      </el-select>
    </el-form-item>
    <el-form-item label="计量器安装位置"  prop="meterSetupaddr">
      <el-input v-model="dataForm.meterSetupaddr" placeholder="计量器安装位置" maxlength="100"></el-input>
    </el-form-item>
    <el-form-item label="计量器序列号"  prop="sn">
      <el-input v-model="dataForm.sn" placeholder="计量器序列号" maxlength="50"></el-input>
    </el-form-item>
      <!--<el-form-item label="插座：">-->
        <!--<div v-for="(v, t) in chazuo" :key="t" style="display: inline-block" class="theme-front-color">-->
          <!--名称：<el-input v-model="chazuo[t].meterName" placeholder="插座名称" style="width: 150px" maxlength="50"></el-input>-->
          <!--&nbsp; &nbsp;编码：<el-input v-model="chazuo[t].meterCode" placeholder="插座编码" style="width: 150px" maxlength="50"></el-input>-->
          <!--<i-->
            <!--class="el-icon-circle-plus-outline"-->
            <!--style="margin-left: 5px"-->
            <!--@click="addItem(t)"-->
          <!--&gt;</i>-->
          <!--<i-->
            <!--class="el-icon-remove-outline"-->
            <!--style="margin-left: 5px"-->
            <!--@click="removeItem(t)"-->
          <!--&gt;</i>-->
        <!--</div>-->
    <!--</el-form-item>-->

    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false" size="small">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()" size="small">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    data () {
      return {
        chazuo:[{"meterName":"","meterCode":""}],
        collectDataList:[],
        meterTypeList:[],
        meterModelListTotal:[],
        meterModelList:[],
        potocolList:[],
      visible: false,
        dataForm: {
          id:0,
          meterCode: '',
          meterName: '',
          meterAddr: '',
          meterModel: '',
          meterType: '',
          meterStatus: '1',
          meterLastupdate: '',
          meterSetupaddr: '',
          equiCode: '',
          sn: '',
          meterModelPotocol:''
        },
        dataRule: {
          meterCode: [
            { required: true, message: '计量器编码', trigger: 'blur' }
          ],
          meterName: [
            { required: true, message: '计量器名称', trigger: 'blur' }
          ],
          meterAddr: [
            { required: true, message: '计量器表地址不能为空', trigger: 'blur' }
          ],
          meterModel: [
            { required: true, message: '计量器型号不能为空', trigger: 'blur' }
          ],
          meterType: [
            { required: true, message: '计量器类型', trigger: 'blur' }
          ],
          meterStatus: [
            { required: true, message: '计量器状态', trigger: 'blur' }
          ],
          meterLastupdate: [
            { required: true, message: '计量器上次上报数据时间不能为空', trigger: 'blur' }
          ],
          meterSetupaddr: [
            { required: true, message: '计量器安装位置不能为空', trigger: 'blur' }
          ],
          equiCode: [
            { required: true, message: '采集器编号不能为空', trigger: 'blur' }
          ],
          sn: [
            { required: true, message: '计量器序列号不能为空', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      addItem(i) {
        if (!this.chazuo[i]) {
          this.$message.error("请先输入插座信息");
          return;
        }
        this.chazuo.push({"meterName":"","meterCode":""});
      },
      removeItem(i) {
        if (this.chazuo.length > 1) {
          this.chazuo.splice(i, 1);
        }
      },
      changeProtocal(){
        this.dataForm.meterModel=''
        this.meterModelList = []
        this.meterModelList = this.meterModelListTotal[this.dataForm.meterModelPotocol]
      },
      init (id,meterTypeList,collectDataList,meterModelList,potocolList) {
        this.chazuo = [{"meterName":"","meterCode":""}]
        this.collectDataList = collectDataList||[]
        this.meterTypeList = meterTypeList ||[]
        this.meterModelListTotal = meterModelList||[]
        this.potocolList = potocolList||[]
        this.dataForm.id = id || 0
        this.visible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          if (this.dataForm.id) {
            this.$api.okhttp({
              url: `/ecs/ecsmeterinfo/info/${this.dataForm.id}`,
              method: 'get',
              params: {}
            }).then((data) => {
              if (data && data.code === 0) {
              this.dataForm.meterCode = data.ecsmeterinfo.meterCode
                this.dataForm.meterAddr = data.ecsmeterinfo.meterAddr
                this.dataForm.meterModel = data.ecsmeterinfo.meterModel
                this.dataForm.meterType = data.ecsmeterinfo.meterType
                this.dataForm.meterStatus = data.ecsmeterinfo.meterStatus
                this.dataForm.meterLastupdate = data.ecsmeterinfo.meterLastupdate
                this.dataForm.meterSetupaddr = data.ecsmeterinfo.meterSetupaddr
                this.dataForm.equiCode = data.ecsmeterinfo.equiCode
                this.dataForm.sn = data.ecsmeterinfo.sn
                this.dataForm.meterName = data.ecsmeterinfo.meterName
              if(data.chazuo && data.chazuo.length>0){
                this.chazuo = data.chazuo
              }
              }
            })
          }
        })
      },
      // 表单提交
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.$api.okhttp({
              url: `/ecs/ecsmeterinfo/${!this.dataForm.id ? 'save' : 'update'}`,
              method: 'post',
              data: {
                'id': this.dataForm.id || undefined,
                'meterCode': this.dataForm.meterCode,
                'meterName': this.dataForm.meterName,
                'meterAddr': this.dataForm.meterAddr,
                'meterModel': this.dataForm.meterModel,
                'meterType': this.dataForm.meterType,
                'meterStatus': this.dataForm.meterStatus,
                'meterLastupdate': this.dataForm.meterLastupdate,
                'meterSetupaddr': this.dataForm.meterSetupaddr,
                'equiCode': this.dataForm.equiCode,
                'sn': this.dataForm.sn,
                'chazuo':this.chazuo,
                "customerId": this.$util.cookies.get('customer_id'),
                'projectId': this.$util.cookies.get("cuuren_projectId")
              }
            }).then((data) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.visible = false
                    this.$emit('refreshDataList')
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      }
    }
  }
</script>
